<template>
  <nav class="nav-content d-flex align-items-end">
    <div class="nav-item" v-for="item in lists" :key="item.index" @click="goTo(item.index, item.className)" :class="item.className">{{ item.name }}</div>
  </nav>
</template>
<script lang="ts" setup>
import { watch, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const lists = ref([
  {
    index: '/',
    name: '首页',
    className: {
      'nav-item-selected': true,
    },
  },
  {
    index: '/resource',
    name: '数据中心',
    className: {
      'nav-item-selected': false,
    },
  },
  {
    index: '/assist',
    name: '辅助分析',
    className: {
      'nav-item-selected': false,
    },
  },
  {
    index: '/system',
    name: '系统管理',
    className: {
      'nav-item-selected': false,
    },
  },
]);
const router = useRouter();
const goTo = (index: string, obj) => {
  lists.value.forEach((item) => {
    item.className['nav-item-selected'] = false;
  });
  obj['nav-item-selected'] = true;
  if (index != '') {
    router.push(index);
  }
};

watch(
  () => router.currentRoute.value,
  (newValue, oldValue) => {
    lists.value.forEach((item, index) => {
      if (!Object.is('/', item.index) && location.pathname.includes(item.index)) {
        goTo('', lists.value[index].className);
      }
    });
  },
  { immediate: true }
);
</script>
<style>
.nav-content {
  margin-left: 440px;
  flex: 1;
}
.nav-item {
  width: 98px;
  margin-right: 32px;
  text-align: center;
  cursor: pointer;
  height: 58px;
  color: #ffffff;
  line-height: 58px;
}
.nav-item:hover {
  border-radius: 6px 6px 0px 0px;
  background: rgb(3 55 113);
}
.nav-content .nav-item-selected {
  border-radius: 6px 6px 0px 0px;
  backdrop-filter: blur(10px);
  border-image-source: linear-gradient(rgba(255, 255, 255, 0.35) 44%, rgba(255, 255, 255, 0));
  border-image-slice: 1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.85) 77%, rgba(255, 255, 255, 0.45)),
    linear-gradient(rgba(255, 255, 255, 0.35) 44%, rgba(255, 255, 255, 0));
  background-origin: border-box;
  background-clip: content-box, border-box;
  color: rgb(13, 83, 217);
}
</style>
